<template name="shopSettings">
  <div class="panel-group" id="shopSettingsAccordian" role="tablist" aria-multiselectable="true">
    <div class="panel panel-default">
      <div class="panel-heading">
        <div class="panel-title">
          <a
            href="#general"
            aria-controls="general"
            aria-expanded="true"
            role="button"
            data-toggle="collapse"
            data-parent="#shopSettingsAccordian"
            data-i18n="admin.settings.general.label">General</a>
        </div>
      </div>
      <div id="general" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="General">
        <div class="panel-body">
          {{#autoForm collection=Collections.Packages schema=Schemas.CorePackageConfig
          doc=packageData id="shopEditOptionsForm" type="update" autosave=true}}
            {{> afFieldInput name='settings.public.allowGuestCheckout'}}
          {{/autoForm}}
        </div>
        <div class="panel-body">
          {{#autoForm collection=Collections.Shops doc=shop id="shopEditForm" type="update"}}
            {{> afQuickField name='name' placeholder="Shop Name"}}
            {{> afQuickField name='slug' placeholder="Shop Slug"}}
            {{> afQuickField name='emails.0.address' label="Email" placeholder="Primary Contact Email"}}
            {{> afQuickField name='description' placeholder="Description"}}
            {{> afQuickField name='keywords' placeholder="Keywords"}}
            {{> shopSettingsSubmitButton}}
          {{/autoForm}}
        </div>
      </div>
    </div>

    <div class="panel panel-default">
      <div class="panel-heading">
        <div class="panel-title">
          <a
            href="#address"
            aria-controls="address"
            aria-expanded="true"
            role="button"
            data-toggle="collapse"
            data-parent="#shopSettingsAccordian"
            data-i18n="admin.settings.address.label">Address</a>
        </div>
      </div>
      <div id="address" class="panel-collapse collapse" role="tabpanel" aria-labelledby="address">
        <div class="panel-body">
          {{#autoForm collection=Collections.Shops doc=shop id="shopEditAddressForm" type="update"}}
            {{> afQuickField name='addressBook.0.company'}}
            {{> afQuickField name='addressBook.0.fullName'}}
            {{> afQuickField name='addressBook.0.address1'}}
            {{> afQuickField name='addressBook.0.address2'}}
            {{> afQuickField name='addressBook.0.city'}}
            {{> afQuickField name='addressBook.0.region'}}
            {{> afQuickField name='addressBook.0.postal'}}
            {{> afQuickField name='addressBook.0.country' options=countryOptions}}
            {{> afQuickField name='addressBook.0.phone'}}
            {{> afQuickField name='addressBook.0.isCommercial'}}
            {{> afQuickField name='addressBook.0.isShippingDefault' defaultValue=true}}
            {{> afQuickField name='addressBook.0.isBillingDefault' defaultValue=true}}
            {{> shopSettingsSubmitButton}}
          {{/autoForm}}
        </div>
      </div>
    </div>

    {{#each reactionApps provides='shopSettings'}}
      <div class="panel panel-default">
        <div class="panel-heading panel-heading-flex">
          <div class="panel-title">
            <a
              href="#collapsable-{{template}}"
              aria-controls="collapsable-{{template}}"
              role="button"
              data-toggle="collapse"
              data-parent="#shopSettingsAccordian">
              <i class="{{icon}}"></i>
              <span data-i18n="{{i18nKeyLabel}}">{{label}}</span>
            </a>
          </div>
          {{#if showAppSwitch template}}
          <div class="panel-controls">
            <input class="checkbox-switch" type="checkbox" name="enabled" data-id={{packageId}} data-key="{{settingsKey}}" {{checked enabled}}>
          </div>
          {{/if}}
        </div>
        <div id="collapsable-{{template}}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="collapsable-{{template}}">
          <div class="panel-body {{shown enabled}}">
            {{> React component=ReactComponentOrBlazeTemplate name=template props=.}}
          </div>
        </div>
      </div>
    {{/each}}
  </div>

  {{#if shopSettingsBlockProps.shopId}}
  <div class="shopSettingsBlockArea">
    {{> React component=Blocks region="ShopSettings" blockProps=shopSettingsBlockProps}}
  </div>
  {{/if}}
</template>

<template name="optionsShopSettings">
  <div class="optionsShopSettings">
    {{#autoForm collection=Collections.Packages schema=Schemas.CorePackageConfig
    doc=packageData id="shopEditExternalServicesForm" type="method-update" meteormethod="shop/updateShopExternalServices"}}
      {{> afQuickField name='settings.google.clientId'}}
      {{> afQuickField name='settings.google.apiKey'}}
      {{> shopSettingsSubmitButton}}
    {{/autoForm}}
  </div>
</template>

<template name="shopSettingsSubmitButton">
  <div class="clearfix">
    <button type="submit" class="btn btn-primary pull-right" data-i18n="app.saveChanges">Save Changes</button>
  </div>
</template>

<template name="shopDashboard"></template>
